<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-yellow" :isBack="true">
			<block class="text-white" slot="content">佣金详细</block>
		</cu-custom>
		
		<view class="bg-white">
			<view class="padding solid-bottom flex justify-start align-baseline">
				<view class="text-yellow title">
					<text class="text-xxl">
						<text class="iconfont icon-mendian"></text>
					</text>
					<text>佣金信息</text>
				</view>
			</view>
		
			<view class="">
				<view class="cu-form-group">
					<view class="title">金额</view>
					<view class="text-bold">
						￥{{commissionitem.commission / 100}}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">提成比例</view>
					<view class="location-content">
						{{commissionitem.proportion}}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">原始金额</view>
					<view class="location-content">
						{{commissionitem.amont}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="bg-white">
			<view class="padding solid-bottom flex justify-start align-baseline">
				<view class="text-yellow title">
					<text class="text-xxl">
						<text class="iconfont icon-mendian"></text>
					</text>
					<text>预约信息</text>
				</view>
			</view>
		
			<view class="">
				<view class="cu-form-group">
					<view class="title">发生日期</view>
					<view class="text-bold">
						{{aroomyyjl.ct}}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">支付状态</view>
					<view class="location-content">
						{{aroomyyjl.pflg ? "已支付":"未支付"}}
					</view>
				</view>
			</view>
		</view>


		<view class="bg-white">
			<view class="padding solid-bottom flex justify-start align-baseline">
				<view class="text-yellow title">
					<text class="text-xxl">
						<text class="iconfont icon-mendian"></text>
					</text>
					<text>门店信息</text>
				</view>
			</view>

			<view class="">
				<view class="cu-form-group">
					<view class="title">门店名</view>
					<view class="text-bold">
						{{md.sname || '加载中...'}}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">教练名</view>
					<view class="location-content">
						{{jl.jlname || '加载中...'}}
					</view>
				</view>
			</view>
		</view>

		
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				commissionitem: {},
				aroomyyjl: {},
				md: {},
				jl: {}
			};
		},
		onLoad: function(option) {
			this.commissionitem.itemid = option.itemid;
			this.getYj();
		},
		methods: {
			getYj: function() {
				// 确保使用正确的API路径和参数名
				this.api("/zj/commission/item/info/get").send({
					itemid: this.commissionitem.itemid // 参数名与后端一致
				}).then(data => {
					// 更新佣金信息
					if (data.acommissionitem) {
						this.commissionitem = data.acommissionitem;
					}

					// 更新预约记录
					if (data.aroomyyjl) {
						this.aroomyyjl = data.aroomyyjl;
					}
					
					if (data.ajiaolian) {
						this.jl = data.ajiaolian;
					}
					
					if (data.astore) {
						this.md = data.astore;
					}
				});
			},
		}
	}
</script>

<style>
	.aroomyyjlitem {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #eee;
	}

	.aroomyyjlitem-date {
		color: #888;
	}

	.aroomyyjlitem-aroomyyjl {
		color: #e54d42;
		font-weight: bold;
	}

	.text-gray {
		color: #8799a3;
		padding: 40rpx 0;
	}

	.icon-empty {
		font-size: 120rpx;
		display: block;
		margin-bottom: 20rpx;
	}

	.text-blue {
		color: #0081ff;
	}

	.text-bold {
		font-weight: bold;
	}

	.text-blue:active {
		opacity: 0.7;
	}

	.location-content {
		flex: 1;
		margin-left: 20rpx;
		word-break: break-all;
		line-height: 1.6;
		text-align: right;
	}

	.cu-form-group .title {
		width: 160rpx;
		flex-shrink: 0;
	}
</style>